<template>
  <div class='construct-project-container'>
    <div v-loading="loading"
         v-if="loading"
         element-loading-text="拼命加载中"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.8)"
         class="loading-style"></div>
    <el-form ref="form"
             :model="requestParam"
             label-width="80px">
      <el-row class="dm-form">
        <el-col :xs="{ span: 12 }"
                :sm="{ span: 8 }"
                :lg="{ span: 8 }"
                :md="{ span: 8 }">
          <el-form-item label="项目名称"
                        prop="project_name">
            <el-input v-model="requestParam.project_name"
                      placeholder="请输入项目名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="{ span: 12 }"
                :sm="{ span: 8 }"
                :lg="{ span: 8}"
                :md="{ span: 8 }">
          <el-form-item label="项目组织"
                        prop="project_org">
            <el-input v-model="requestParam.project_org"
                      placeholder="请输入项目组织"></el-input>
          </el-form-item>
        </el-col>

        <el-col :xs="{ span: 12 }"
                :sm="{ span: 8 }"
                :lg="{ span: 8}"
                :md="{ span: 8 }">
          <el-form-item label="责任组织"
                        prop="duty_org">
            <el-input v-model="requestParam.duty_org"
                      placeholder="请输入责任组织"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="dm-form">
        <el-col :xs="{ span: 12 }"
                :sm="{ span: 12 }"
                :lg="{ span: 8  }"
                :md="{ span: 12 }"
                class="location">
          <el-form-item label="地址"
                        prop="area">
            <LocationSelect :locaData.sync="requestParam"></LocationSelect>
          </el-form-item>

        </el-col>
        <el-col class="flex-end"
                :lg="{ span: 6, offset: 10 }"
                :xs="{ span: 12, offset: 0 }"
                :sm="{ span: 12, offset: 0 }"
                :md="{ span: 12, offset: 0 }">
          <el-button class="search-btn"
                     @click="projectSync"
                     type="primary">项目同步</el-button>
          <el-button icon="el-icon-search"
                     class="search-btn"
                     @click="search"
                     type="primary">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-col :span="24"
              class="project-table">
        <el-table :highlight-current-row="true"
                  border
                  :header-cell-style="{ background: '#f5f5f5' }"
                  :data="projectList.list">
          <el-table-column width="60"
                           v-if="pageType==='component'">
            <!--  -->
            <template slot-scope="scope">
              <el-checkbox @change="(checked)=>{toggleProject(checked,scope.row)}"
                           v-model="scope.row.checked"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column prop="project_name"
                           show-overflow-tooltip
                           label="项目名称">
          </el-table-column>
          <el-table-column prop="duty_org"
                           width="200"
                           show-overflow-tooltip
                           label="责任组织(行政)">
          </el-table-column>
          <el-table-column prop="project_org"
                           width="200"
                           label="项目组织(行政)">
          </el-table-column>
          <el-table-column prop="province"
                           width="100"
                           label="省">
          </el-table-column>
          <el-table-column prop="city"
                           width="100"
                           label="市">
          </el-table-column>
          <el-table-column prop="area"
                           width="100"
                           label="区">
          </el-table-column>
          <el-table-column prop="comm_addr"
                           show-overflow-tooltip
                           label="通讯地址">
          </el-table-column>
          <el-table-column prop="is_bind"
                           width="100"
                           label="状态">
            <template slot-scope="scope">
              {{scope.row.is_bind===1?'已绑定':'未绑定'}}
            </template>

          </el-table-column>
          <el-table-column label="是否对接"
                           width="100"
                           prop="is_join">
            <template slot-scope="scope">
              {{scope.row.is_join===1?'已对接':'未对接'}}
            </template>
          </el-table-column>
          <el-table-column label="最近同步时间"
                           width="160"
                           prop="updated_at">
          </el-table-column>
        </el-table>
        <el-pagination @current-change="handlePageChange"
                       @size-change="handleSizeChange"
                       :current-page="requestParam.page"
                       :page-size="requestParam.page_size"
                       layout="total,sizes,prev, pager, next, jumper"
                       background
                       :total="projectList.total_count"
                       align="center">
        </el-pagination>
      </el-col>

    </el-row>
  </div>
</template>
<script>
import { ProjectListApi } from "@/services/ProjectCenter";
import LocationSelect from "@/components/LocationSelect/LocationSelect";
export default {
  data () {
    return {
      loading: true, //加载
      requestParam: {
        project_name: '',
        duty_org: '',
        project_org: '',
        province: '',
        province_no: '',
        city: '',
        city_no: '',
        area: '',
        area_no: '',
        is_page: 1,
        type: 'jt',
        page: 1,
        page_size: 10
      },
      resetForm: {
        project_name: '',
        duty_org: '',
        project_org: '',
        province: '',
        province_no: '',
        city: '',
        city_no: '',
        area: '',
        area_no: '',
        is_page: 1,
        type: 'jt',
        page: 1,
        page_size: 10
      },
      projectList: {
        list: [],
        page: 1,
        total_count: 0
      },
      // 选中的项目
      choosedProject: {}
    }
  },
  name: 'constructionProjectList',
  components: {
    LocationSelect
  },
  props: {
    // 判断是页面模式还是组件模式    
    pageType: {
      type: String,
      default: 'page'
    },
    // 更新选中行数据，供外部页面使用
    choosedRow: {
      type: Object
    }
  },
  methods: {
    projectSync () { // 项目同步
      this.loading = true;
      ProjectListApi.projectSync({
        params: {}
      }).then(res => {
        if (res.code === 0) {
          this.handlePageChange(1)//刷新
          this.$message.success('同步成功')
        } else {
          this.loading = false;
        }
      })
    },
    handleSizeChange (size) {
      this.loading = true;
      this.requestParam.page_size = size
      this.requestParam.page = 1
      this.getConstructProjectList()
    },
    // 切换选择的项目
    toggleProject (check, row) {

      if (check) {
        this.projectList.list.map(item => {
          if (item.jt_project_id !== row.jt_project_id) {
            this.$set(item, 'checked', false)
          } else {
            this.$set(item, 'checked', true)
          }
        })
        this.choosedProject = row
      } else {
        this.choosedProject = {}
      }
      this.$emit('update:choosedRow', this.choosedProject)

    },
    handlePageChange (page) {
      this.loading = true;
      this.requestParam.page = page
      this.getConstructProjectList()
    },
    search () {
      this.loading = true;
      this.requestParam.page = 1
      this.getConstructProjectList()
    },
    reset () {
      this.loading = true;
      let reset = JSON.parse(JSON.stringify(this.resetForm))
      this.requestParam = Object.assign(this.requestParam, reset)
      this.getConstructProjectList()
    },
    // 获取建投施工项目列表
    getConstructProjectList () {
      this.requestParam.province_name = this.requestParam.province
      this.requestParam.city_name = this.requestParam.city
      this.requestParam.area_name = this.requestParam.area
      ProjectListApi.getConstructProjectList({
        params: this.requestParam
      }).then(async res => {
        if (res.code === 0) {
          this.projectList = res.data
          this.projectList.list.map((item) => {
            this.$set(item, 'checked', false)
          })
        }
        this.loading = await false;
      })
    }
  },
  created () {
    this.getConstructProjectList()
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
.construct-project-container {
  padding: 20px;
  position: relative;
  .project-table {
    margin-top: 20px;
  }
  .el-pagination {
    margin-top: 20px;
  }
}
.loading-style {
  width: 100%;
  height: calc(100vh + 40px);
  position: absolute;
  top: -20px;
  left: 0px;
}
</style>